<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/md5.js"></script>
<title>Z盘</title>
<style type="text/css">
body {
	margin: 0.5em;
}

#title {
	font-size: 2em;
}

#table td {
	padding: 0.5em 0 0 0.5em;
}

#table td:nth-child(1) {
	text-align: right;
}

#table td:nth-child(2) {
	padding: 0;
	color: red;
	font-size: 1.5em;
}

#table td:nth-child(3) {
	padding: 0.5em 1em 0 1em;
	width: 20em;
}

#table td:nth-child(4) {
	color: red;
}

#refreshLink {
	font-size: 0.8em;
}
</style>
<script>
	/* 自动加载 设置enter键监听修改密码 */
	$(function() {
		$("#oldPwd").focus();
		$(document).keydown(function(event) {
			if (event.keyCode == 13) {
				changePwd();
			}
		});
	});
	/* 显示提示信息 */
	function showTips(name, msg, color = "danger") {
		$("#tips").remove();
		var div = "<div id=\"tips\" class=\"alert alert-dismissable alert-" + color + "\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button><span>" + msg + "</span></div>";
		$("body").prepend(div);
		$(".form-control").css("background", "#fff");
		$("#" + name).css("background", "#faa");
		$("#" + name).focus();
	}
	/* 修改密码 */
	function changePwd() {
		var regPwd = /^.{8,16}$/;
		var oldPwd = $("#oldPwd").val();
		var pwd = $("#pwd").val();
		var pwd2 = $("#pwd2").val();
		if (!regPwd.test(oldPwd)) {
			showTips("oldPwd", "密码格式错误！");
			return false;
		}
		if (!regPwd.test(pwd)) {
			showTips("pwd", "密码格式错误！");
			return false;
		}
		if (pwd != pwd2) {
			showTips("pwd2", "密码与确认密码不一致！");
			return false;
		}
		oldPwd = hex_md5(oldPwd);
		pwd = hex_md5(pwd);
		$.ajax({
			url : "/user/changePwd",
			type : "post",
			data : JSON.stringify({
				pwd : oldPwd,
				newPwd : pwd,
			}),
			contentType : "application/json;charset=UTF-8",
			dataType : "json",
			success : function(data) {
				if (data.code == 0) {
					showTips(null, "密码修改成功！", "success");
				} else {
					showTips(null, data.msg);
				}
			},
			error : function(e) {
				showTips(null, "网络异常，请重试！", "warning");
			}
		});
	}
</script>
</head>
<body>
	<div id="top">
		<div id="title">修改密码</div>
	</div>
	<div id="table">
		<table>
			<tr>
				<td>旧密码</td>
				<td>*</td>
				<td>
					<input type="password" class="form-control" placeholder="请输入旧密码" id="oldPwd" />
				</td>
			</tr>
			<tr>
				<td>新密码</td>
				<td>*</td>
				<td>
					<input type="password" class="form-control" placeholder="请输入新密码" id="pwd" />
				</td>
				<td>要求：8-16个字符。</td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td>*</td>
				<td>
					<input type="password" class="form-control" placeholder="请输入确认密码" id="pwd2" />
				</td>
				<td>要求：需要与新密码相同。</td>
			</tr>
			<tr>
				<td>
					<a href="/user/changePwd" id="refreshLink">刷新页面</a>
				</td>
				<td></td>
				<td>
					<button class="btn btn-success btn-lg" onclick="changePwd()">修改密码</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
